<template>
	<div class="hello">

		<el-container>
			<!-- <el-header style="background-color:teal;">
<el-row :gutter="24">
    	<el-col :span="6" style="logo  logo-width">
				<h2><span style="color:white;">汽修宝管理平台</span></h2>
			</el-col>
</el-row>
  </el-header> -->
			<el-header style="background-color:teal;height:auto;">
				<el-row :gutter="24" class="header" style="background-color:teal;">

					<el-col class="logo" v-show="!isCollapse" style="width:200px">
						<h2><span style="color:white;">{{isCollapse?'':'商家管理后台'}}</span></h2>
					</el-col>

					<!-- <el-col :span="10">
				<div class="tools" @click.prevent="isCollapse =!isCollapse">
						<h2><span style="color:white;">  		<i class="fa fa-align-justify"></i></span></h2>	
          
				</div>
			</el-col> -->

					<el-col :span="4" class="userinfo" style="float:right">
						<el-dropdown trigger="hover" style="float:right">
							<h2>	<span class="el-dropdown-link userinfo-inner" style="color:#fff;    display: flex;    align-items: center;">
					 <img :src="$store.getters.getMerchantIcon"  style="height:20px ;width:20px;    border-radius: 8px;"  alt=""/>
					 	<span style="    font-size: 14px;margin: 0 10px;    white-space: nowrap;">{{$store.getters.getMerchantName}}</span>
					  </span></h2>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="goInfo()">我的</el-dropdown-item>
								<el-dropdown-item @click.native="$router.push({path:'/password'})">修改密码</el-dropdown-item>

								<el-dropdown-item divided @click.native="loginOut">注销</el-dropdown-item>

							</el-dropdown-menu>
						</el-dropdown>
					</el-col>

				</el-row>
			</el-header>

			<el-container class="main">
				<el-aside :class="isCollapse?'menu-collapsed':'menu-expanded'" style="width:200px">
					<el-menu default-active="1-4-1" router :unique-opened="true" active-text-color="teal" @open="handleOpen" @close="handleClose" :collapse="isCollapse">

						<el-submenu index="menu2" v-if="$store.getters.getRoleTpye === 'admin' || handelUpdateRole(1)">
							<template slot="title">
								<i class="iconfont icon-dianpuxinxi el-icon-menu"></i>

								<span v-show="!isCollapse">店铺信息设置</span></template>
							<el-menu-item index="/merchantindex">
								<i class="iconfont icon-list-items el-icon-menu"></i> 店铺信息
							</el-menu-item>

						</el-submenu>

						<el-submenu index="maintain" v-if="$store.getters.getRoleTpye === 'admin' ||handelUpdateRole(36)">
							<template slot="title">
								<i class="iconfont icon-jishu el-icon-menu"></i>

								<span v-show="!isCollapse">技术信息管理</span> </template>
							<el-menu-item index="/maintainlist">
								<i class="iconfont icon-list-items el-icon-menu"></i> 技术信息列表
							</el-menu-item>
						</el-submenu>

						<el-submenu index="menu3" v-if="$store.getters.getRoleTpye === 'admin' ||handelUpdateRole(13)||handelUpdateRole(35)">
							<template slot="title">
								<i class="iconfont icon-shangpin02icon el-icon-menu"></i>

								<span v-show="!isCollapse">商品信息管理</span></template>

							<el-menu-item index="/addgoods" v-if="$store.getters.getRoleTpye === 'admin' ||handelUpdateRole(13)">
								<i class="iconfont icon-list-items el-icon-menu"></i> 添加商品
							</el-menu-item>

							<el-menu-item index="/goodslist" v-if="$store.getters.getRoleTpye === 'admin' ||handelUpdateRole(35)">
								<i class="iconfont icon-list-items el-icon-menu"></i> 上架商品列表
							</el-menu-item>

						</el-submenu>
						
						<el-submenu index="menu10" 
							v-if="($store.getters.getRoleTpye === 'admin' ||handelUpdateRole(13)||handelUpdateRole(35)) && merchantId !='Mer5af2b0d9db573c5063f0fe3b'">
							<template slot="title">
								<i class="iconfont icon-shangpin02icon el-icon-menu"></i>
								<span v-show="!isCollapse">保养手册</span></template>
							<el-menu-item index="/maintenance" v-if="$store.getters.getRoleTpye === 'admin' ||handelUpdateRole(13)">
								<i class="iconfont icon-list-items el-icon-menu"></i> 保养手册数据
							</el-menu-item>
						</el-submenu>
						
						
						
						<el-submenu index="menu7" v-if="$store.getters.getModel.maintenanceUpload === 'true'">
							<template slot="title">
								<i class="iconfont icon-shangpin02icon el-icon-menu"></i>
								<span v-show="!isCollapse">养护及施工数据</span>
							</template>
							<el-menu-item index="/repairIndex" v-if="$store.getters.getRoleTpye === 'admin' ||handelUpdateRole(13)">
								<i class="iconfont icon-list-items el-icon-menu"></i> 修理工审核
							</el-menu-item>
							<el-menu-item index="/construction" v-if="$store.getters.getRoleTpye === 'admin' ||handelUpdateRole(13)">
								<i class="iconfont icon-list-items el-icon-menu"></i> 施工数据
							</el-menu-item>
						</el-submenu>

						<el-submenu index="order" v-if=" $store.getters.getModel.basicMall === 'true' && ($store.getters.getRoleTpye === 'admin' ||handelUpdateRole(34))">
							<template slot="title">
								<i class="iconfont icon-weibiaoti1 el-icon-menu"></i>

								<span v-show="!isCollapse">订单信息管理</span> </template>
							<el-menu-item index="/orderindex">
								<i class="iconfont icon-list-items el-icon-menu"></i> 订单列表
							</el-menu-item>
							<el-menu-item 
								
								index="/accountindex" 
		v-if="($store.getters.getRoleTpye === 'admin' || handelUpdateRole(34)) && merchantId !='Mer5af2b0d9db573c5063f0fe3b'">
								<i class="iconfont icon-list-items el-icon-menu"></i> 挂单列表
							</el-menu-item>
						</el-submenu>

						<el-submenu index="tran" v-if=" $store.getters.getModel.basicMall === 'true' && ($store.getters.getRoleTpye === 'admin' ||handelUpdateRole(23))">
							<template slot="title">
								<i class="iconfont icon-caiwuguanli el-icon-menu"></i>

								<span v-show="!isCollapse">财务信息管理</span> </template>
							<el-menu-item index="/transcation">
								<i class="iconfont icon-list-items el-icon-menu"></i> 财务数据
							</el-menu-item>
						</el-submenu>

						<el-submenu index="menu5" v-if="$store.getters.getRoleTpye === 'admin' ||handelUpdateRole(25) ||handelUpdateRole(33)">
							<template slot="title">

								<i class="iconfont icon-huiyuanshezhi el-icon-menu"></i>

								<span v-show="!isCollapse">会员信息管理</span></template>

							<el-menu-item index="/userindex" v-if="$store.getters.getRoleTpye === 'admin' ||handelUpdateRole(25)">
								<i class="iconfont icon-list-items el-icon-menu"></i> 会员列表
							</el-menu-item>
							<el-menu-item index="/usermemberprice" v-if=" $store.getters.getModel.seniorMall === 'true'&& ($store.getters.getRoleTpye === 'admin' ||handelUpdateRole(33))">
								<i class="iconfont icon-list-items el-icon-menu"></i> 会员等级
							</el-menu-item>
						</el-submenu>

						<el-submenu index="menu6" v-if="$store.getters.getRoleTpye === 'admin'">
							<template slot="title">
								<i class="iconfont icon-setting-permissions el-icon-menu"></i>
								<span v-show="!isCollapse">权限信息管理</span></template>
							<el-menu-item index="/sysuser">
								<i class="iconfont icon-list-items el-icon-menu"></i> 用户管理
							</el-menu-item>
							<el-menu-item index="/roledetail">
								<i class="iconfont icon-list-items el-icon-menu"></i> 岗位管理
							</el-menu-item>
						</el-submenu>

						</el-submenu>

					</el-menu>

					</el-menu>

				</el-aside>
				<el-container>
					<el-main>
						<router-view/>
					</el-main>
				</el-container>
			</el-container>
		</el-container>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				isCollapse: false,
				collapsed: false,
				merchantId: ''
			};
		},
		created() {
			this.merchantId = window.sessionStorage.getItem('merchantId')
			console.log(this.merchantId)
		},
		methods: {
			goInfo() {
				console.log("11111111");
				this.$router.replace({
					path: "/merchantindex"
				});
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			loginOut() {
				this.$confirm("确定退出登录？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						this.$router.replace({
							path: "/login"
						});

						let storage = window.sessionStorage;
						storage.setItem("token", "");
						storage.setItem("merchantId", "");
						this.$store.commit("SETTOKEN", "");
						this.$store.commit("SETMERCHANTID", "");
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消退出登录"
						});
					});
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	el-submenu {
		width: 80%;
	}
	
	el-menu-item {
		width: 80%;
	}
	
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
		.header {
			height: 60px;
			line-height: 60px;
			// background: $color-primary;
			color: #fff;
			.userinfo {
				text-align: right;
				padding-right: 35px;
				float: right;
				.userinfo-inner {
					cursor: pointer;
					color: #fff;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}
			.logo {
				//width:230px;
				height: 60px;
				font-size: 22px;
				padding-left: 20px;
				padding-right: 20px;
				border-color: rgba(238, 241, 146, 0.3);
				border-right-width: 1px;
				border-right-style: solid;
				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}
				.txt {
					color: #fff;
				}
			}
			.logo-width {
				width: 230px;
				font-size: 20px;
			}
			.logo-collapse-width {
				width: 60px;
			}
			.tools {
				padding: 0px 23px;
				width: 14px;
				height: 60px;
				line-height: 60px;
				cursor: pointer;
			}
		}
		.main {
			display: flex; // background: #324057;
			position: absolute;
			top: 60px;
			bottom: 0px;
			overflow: hidden;
			aside {
				flex: 0 0 200px;
				width: 200px; //font-weight : 600;
				// position: absolute;
				// top: 0px;
				// bottom: 0px;
				.el-menu {
					height: 100%;
				}
				.collapsed {
					width: 60px;
					.item {
						position: relative;
					}
					.submenu {
						position: absolute;
						top: 0px;
						left: 60px;
						z-index: 99999;
						height: auto;
						display: none;
					}
				}
			}
			.menu-collapsed {
				flex: 0 0 60px;
				width: 60px;
			}
			.menu-expanded {
				flex: 0 0 200px;
				width: 200px;
			}
			.content-container {
				// background: #f1f2f7;
				flex: 1; // position: absolute;
				// right: 0px;
				// top: 0px;
				// bottom: 0px;
				// left: 230px;
				overflow-y: scroll; //padding: 20px;
				padding-top: 10px;
				padding-right: 20px;
				padding-bottom: 20px;
				padding-left: 20px;
				.breadcrumb-container {
					margin-bottom: 10px;
					.title {
						width: 200px;
						float: left;
						color: #475669;
					}
					.breadcrumb-inner {
						float: left;
					}
				}
				.content-wrapper {
					background-color: #fff;
					box-sizing: border-box;
				}
			}
		}
	}
</style>